<template>
    <section id="todo">
        <div>
            <input type="text" class="addInpt"
                   placeholder="接下去要做什么？"
                   autofocus="autofocus"
                   ref="inputAdd"
                   @keyup.enter="addTodoItem" />
        </div>
        <ul>
           <li is="listItem"
               v-for="item in content"
               :key="item.id" :item="item"
               @changeData="changeCheckData"
               @deleteItem="deleteData"></li>
        </ul>
        <tab :length="content.length" @clearAll="clearAllData"></tab>
    </section>
</template>

<script>
    import listItem from './item.vue'
    import tab from './tab.vue'
    const storage = window.localStorage;
    export default {
        name: "todo",
        data() {
          return {
              content: []
          }
        },
        components: {listItem,tab},
        methods: {
            addTodoItem: function() {
                const oInput = this.$refs.inputAdd
                const value = oInput.value
                const sId = this.content.length
                if(value) {
                    const newItem = {
                        id: sId,
                        content: value,
                        isChecked: false
                    };
                    this.content.unshift(newItem);
                    storage.content = JSON.stringify(this.content);
                    oInput.value = ''
                }
            },
            changeCheckData: function(id) {
                const content = this.content,
                        index = content.findIndex(value => value.id === id);
                this.content[index].isChecked = !this.content[index].isChecked;
                storage.content = JSON.stringify(this.content);
            },
            deleteData: function(id) {
               const content = this.content;
               content.splice(content.findIndex(value => value.id === id),1)
                storage.content = JSON.stringify(this.content);
            },
            clearAllData: function(msg) {
                const content = this.content;
                let obj = [];
                switch (msg) {
                    case 'all':
                        const len = content.length;
                        this.content.splice(0,len);
                        break;
                    case 'active':
                        obj = content.filter(item => item.isChecked === true);
                        this.content = obj;
                        break;
                    case 'completed':
                        obj = content.filter(item => item.isChecked === false);
                        this.content = obj;
                        break;
                }
                storage.content = JSON.stringify(this.content);
            }
        },
        created: function() {
            let content = storage.content;
            if(content) {
                content = JSON.parse(content)
                this.content = content
            }
        }
    }
</script>

<style lang="scss" scoped>
    #todo {
        width: 100%;
        border-radius: 4px;
        min-height: 300px;
        /*background: rgba(66, 66, 66, 0.6);*/

        .addInpt {
            width: 100%;
            padding: 16px 0 16px 50px;
            font-size: 16px;
            border-bottom: 1px solid #e9e9e9;
            background: #fff;
            &:focus {
                outline: none;
            }
        }
    }

</style>